<script setup>

import SettingTable from "@/components/SettingTable.vue";
import Footer from "@/components/Footer.vue";
import {ref} from "vue";
const params=ref([
  {
    label:"气温权重",
    value:""
  },
  {
    label: "云层厚度权重",
    value: ""
  },
  {
    label: "光照权重",
    value: ""
  },
  {
    label: "气旋权重",
    value: ""
  },
  {
    label: "其他权重",
    value: ""
  },
])
</script>

<template>
  <div class="meteorology">
    <div class="meteorogram-content">
      <div class="meteorogram-left">
        <iframe src="https://www.supermapol.com/apps/mapdashboard/v2/index.html?id=861999312"></iframe>
      </div>
      <div class="meteorogram-right">
        <SettingTable :params="params"></SettingTable>
      </div>
    </div>
  </div>
  <Footer></Footer>
</template>

<style lang="less" scoped>
.meteorogram-content{
  padding:0;
  margin:0;
  height:40vw;
  width:100%;
  display:flex;
  /*border:1px blue solid;*/
}
.meteorogram-left{
  flex-grow:1;
  height:40vw;
  /*border:1px red solid;*/
}
iframe{
  width:100%;
  height:100%;
}
.meteorogram-right{
  margin-left: 10px;
  //flex-grow:1;
  width: 650px;
  height:100%;
  /*border:1px green solid;*/
}

@media screen and (max-width:2000px){
  .meteorogram-left{
    /*flex-grow:2;*/
    width: 60%;
  }
  .meteorogram-right{
    margin-left: 0px;
    width: 40%;
    /*flex-grow:1;
    border:1px green solid;*/
  }

}

</style>
<!--2024/2/17 0:09-->